@(title: String)(content: Html)(implicit lang: Lang)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>

        <!--[if lt IE 9]>
	        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      	<![endif]-->
        <link href="@routes.Assets.at("images/favicon.png")" rel="shortcut icon" type="image/png" >
        <link href="@routes.Assets.at("css/main.css")" rel="stylesheet">
        <link href="@routes.Assets.at("css/bootstrap.min.css")" rel="stylesheet"> <!-- Loading Bootstrap -->
        <link href="@routes.Assets.at("css/bootstrap-responsive.min.css")" rel="stylesheet">
		<link href="@routes.Assets.at("css/bootstrap-datetimepicker.min.css")" rel="stylesheet">
        <link href="@routes.Assets.at("css/font-awesome.min.css")" rel="stylesheet">
        <link href="@routes.Assets.at("css/bootswatch.css")" rel="stylesheet">
        <link href="@routes.Assets.at("css/datepicker.css")" rel="stylesheet">
		<link href="@routes.Assets.at("css/apprise.css")" rel="stylesheet">
        <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    	<!-- Javascript -->
    	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js")" type="text/javascript"></script> <!-- jQuery CDN -->
    	<script src="@routes.Assets.at("js/jquery.blockUI.js")"></script>
		<script src="@routes.Assets.at("js/apprise-1.5.full.js")"></script>
    	<script src="@routes.Assets.at("js/jquery.smooth-scroll.min.js")"></script>
    	<script src="@routes.Assets.at("js/bootstrap-datepicker.js")"></script>
		<script src="@routes.Assets.at("js/bootstrap-datetimepicker.min.js")"></script>
    	<script src="@routes.Assets.at("js/holder.js")"></script>
    	<script src="@routes.Assets.at("js/main.js")"></script>
		<script src="@routes.Assets.at("js/Chart.min.js")"></script>


    </head>
    <body>

		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
       				<a class="brand" href="@routes.Application.index(lang.code)">The Cult Cinema Inc. <h1>Ticketing System</h1></a>
					<div class="nav-collapse collapse" id="main-menu">
						<ul class="nav" id="main-menu-left">
							<li><a href="@routes.MovieManager.list(lang.code)">@Messages("movie")(lang)</a></li>
							<li><a href="@routes.MovieManager.showToday(lang.code)">@Messages("showtime")(lang)</a></li>
							<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#">@Messages("member")(lang) <b class="caret"></b></a>
								<ul class="dropdown-menu" id="swatch-menu">
									<li><a href="@routes.Member.profile(lang.code)">@Messages("profile")(lang)</a></li>
									<li class="divider"></li>
									<li><a href="@routes.Member.transaction(lang.code)">@Messages("transaction")(lang)</a></li>
									<li><a href="@routes.Member.refund(lang.code)">@Messages("refund")(lang)</a></li>
								</ul>
							</li>
							<li><a href="@routes.Application.about(lang.code)">@Messages("about")(lang)</a></li>

							@if(LogSession.currentRole()!=null && LogSession.currentRole() > 0) {
								<li class="dropdown">
								<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-info-sign"></i> @Messages("staff")(lang)<b class="caret"></b></a>
								<ul class="dropdown-menu" id="swatch-menu">
									<li><a href="@routes.Staff.refund(1,lang.code)">@Messages("staff.authenticate")(lang)</a></li>
									<li><a href="@routes.Staff.sale(lang.code)">@Messages("staff.sale")(lang)</a></li>
									@if(LogSession.currentRole() == 1) {
										<li class="divider"></li>
										<li><a href="@routes.Staff.movieManager(lang.code)">@Messages("staff.movie.manage")(lang)</a></li>
										<li><a href="@routes.Staff.houseManager(lang.code)">@Messages("staff.house.manage")(lang)</a></li>
										<li><a href="@routes.Staff.statistics(lang.code)">@Messages("staff.statistics")(lang)</a></li>
									}
								</ul>
								</li>
							}

						</ul>

						<ul class="nav pull-right" id="main-menu-right">


							@if(LogSession.current() != null) {
								<li><a rel="tooltip" title="@Messages("message.member")(lang)"><i class="icon-user"></i> @LogSession.current()</a></li>
								<li><a rel="tooltip" href="@routes.Application.logout(lang.code)" title="@Messages("message.logout")(lang)">@Messages("logout")(lang) <i class="icon-signout"></i></a></li>
							} else {
								<li><a rel="tooltip" href="@routes.Application.login(lang.code)" title="@Messages("message.login")(lang)"><i class="icon-signin"></i> @Messages("login")(lang)</a></li>
							}
							<li><a id="toEng" href="?lang=en">ENG</a></li>
							<li><a id="toChi" href="?lang=zh">中文</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			@content

			<hr />
			<footer id="footer">
				<p class="pull-right"><a href="#top">Back to top</a></p>
				<div class="links">
					<a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a>
					<a href="@routes.MovieManager.list(lang.code)">@Messages("movie")(lang)</a>
					<a href="@routes.MovieManager.showToday(lang.code)">@Messages("showtime")(lang)</a>
					<a href="@routes.Member.profile(lang.code)">@Messages("profile")(lang)</a>
          			<a href="@routes.Application.about(lang.code)">@Messages("about")(lang)</a>
          		</div>

          		<p>This web site exists to fulfill the coursework requirement of CS4280.<br />
          		Do not use your real personal data as input.
          		<p>
          		Made by Students From <a href="http://www.cityu.edu.hk/">@Messages("school")(lang)</a> course <a href="http://eportal.cityu.edu.hk/bbcswebdav/institution/APPL/Course/Current/CS4280.htm">cs4280</a>.<br />
          		Based on <a href="http://bootswatch.com/cyborg/">Bootstrap Cyborg</a> and <a href="http://playframework.com">Java Play Framework</a>.<br/>
          		Copyright &#169; The Cult Cinema Inc. All rights reserved.
          		</p>
        	</footer>

        </div>

    	<!-- Javascript -->
    	<script src="@routes.Assets.at("js/bootstrap.min.js")"></script>
    	<script src="@routes.Assets.at("js/bootswatch.js")"></script>
			<script>

			    $('.trailer-list, .trailer-on-playing').click(function(e){
			    	$('.trailer-on-playing').removeClass('trailer-on-playing').addClass('trailer-list')
			    							.find('.trailer-icon').removeClass('icon-play-circle').addClass('icon-film');
			    	$(e.currentTarget).removeClass('trailer-list').addClass('trailer-on-playing')
			    					  .find('.trailer-icon').removeClass('icon-film').addClass('icon-play-circle');
			    });

				Holder.add_theme("poster", { foreground: "#33b5e5",background: "#2d2d2d", size:11, text: "No Poster" });

			</script>

    </body>
</html>